<template>
    <div class="tmpl">
        <nav-bar title="图文分享"></nav-bar>
        <!-- 引入返回导航 -->
        <div class="photo-header">
            <ul>
                <li v-for="getimgcategory in getimgcategory">
                    <a href="javascript:;" @click="share(getimgcategory.id)">{{getimgcategory.title}}</a>
                </li>
            </ul>
        </div>
        <div class="photo-list">
            <ul>
                <li v-for="(getimages,index) in getimages" :key="index">
                    <router-link :to="{name:'share_xiang'}">
<!--                        <img :src="getimages.img_url">-->
                        <img v-lazy="getimages.img_url">
<!--                        懒加载-->
<!--                        <img class="mui-media-object mui-pull-left" :data-lazyload="getimages.img_url">-->
                        <p>
                            <span>{{getimages.title}}</span>
                            <br>
                            <span>{{getimages.zhaiyao}}</span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home_share",
        data(){
            return {
                getimgcategory:[],
                getimages:[]//图片
            }
        },
        created(){
            //图片分类文字请求
            this.Ajax.get("getimgcategory")
            .then(res=>{
                // console.log(res);
                this.getimgcategory=res.data.message;
                this.getimgcategory.unshift({id:0,title:"全部"});
            } )
            .catch(err=>{
                console.log(err);
            })
            this.share(0)

        },
        methods:{
            share(data){
                //图片请求
                this.Ajax.get("getimages/"+data)
                    .then(res=>{
                        this.getimages=res.data.message;
                    }).catch(err=>{
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    .photo-header li {
        list-style: none;
        display: inline-block;
        margin-left: 25px;
        height: 20px;
    }

    .photo-header ul {
        /*强制不换行*/
        white-space: nowrap;
        overflow-x: auto;
        padding-left: 0px;
        margin: 5;
    }

    /*图片懒加载的样式*/
    /*image[lazy=loading] {*/
    /*    width: 40px;*/
    /*    height: 300px;*/
    /*    margin: auto;*/
    /*}*/

    /*下面的图片*/

    .photo-list li {
        list-style: none;
        position: relative;
    }

    .photo-list li img {
        width: 100%;
        height: 230px;
        vertical-align: top;
    }

    .photo-list ul {
        padding-left: 0px;
        margin: 0;
    }

    .photo-list p {
        position: absolute;
        bottom: 0px;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        margin-bottom: 0px;
    }

    .photo-list p span:nth-child(1) {
        font-weight: bold;
        font-size: 16px;
    }
    .photo-list li img{
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
</style>